<template>
  <div class="address" @touchmove.prevent="">
    <div class="box">
      <div class="title">
        {{title}}
        <i class="icon-close" @click="close"></i>
      </div>
      <div class="input-box border-top border-bottom">
        <input type="text" v-model="item.contact_name" placeholder="联系人" maxlength="4" ref="name">
        <input type="number" v-model="item.contact_phone" placeholder="手机号" class="border-left-right"
               oninput="if(value.length>11)value=value.slice(0,11)" ref="phone">
        <input type="text" v-model="item.contact_wechat" placeholder="微信号" ref="wechat">
      </div>
      <div class="area border-bottom">
        <input type="text" @click.stop="show = true" v-model="model" placeholder="选择地区" readonly>
        <i @click.stop="show = true" class="icon-xiangyou"></i>
      </div>
      <div class="area detailedAddress border-bottom">
        <input type="text" v-model="item.detailed_address" placeholder="详细地址 （如街道、小区、乡镇、村）" ref="address">
      </div>
      <div class="btn" @click="submit">
        保存
      </div>
    </div>
    <!--全局地图-->
    <yd-cityselect v-model="show" :callback="result1" :items="district"
                   :provance="item.prov"
                   :city="item.city"
                   :area="item.area">
    </yd-cityselect>

  </div>
</template>

<script>
  import District from 'ydui-district/dist/jd_province_city_area_id';
  import {UpdateContact, getLngLat} from 'common/js/address'

  export default {
    props: {
      title: {
        type: String,
        default: '新增商品地址'
      },
      item: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        district: District,//地址数据库
        show: false, //省级联动显示
        model: '', //地址
        province: '', //省
        city: '', //市
        region: '', //区
        address: '', //详细地址
        lng: '', //经度
        lat: '', //纬度
        area: '',//根据区域获取经纬度
      }
    },
    mounted() {
      //编辑时
      if (this.item.id) {
        this.model = this.item.prov + ' ' + this.item.city + ' ' + this.item.area;
        this.province = this.item.prov;
        this.city = this.item.city;
        this.region = this.item.area
      }
    },
    methods: {
      //提交默认地址
      submit() {
        this.area = this.model + this.item.detailed_address;
        if (this.item.contact_name.match(/^\s+$/g) || this.item.contact_name === '' || this.item.contact_name == null) {
          this.$dialog.toast({mes: '请输入联系人名称', timeout: 1000,});
          this.$refs.name.focus();
        } else if (!(/^1[34578]\d{9}$/.test(this.item.contact_phone))) {
          this.$dialog.toast({mes: '手机号输入有误', timeout: 1000,});
          this.$refs.phone.focus();
        } else if (this.model === '') {
          this.$dialog.toast({mes: '请选择发布地址', timeout: 1000,});
          this.show = true;
        } else if (this.item.detailed_address === '' || this.item.detailed_address == null) {
          this.$dialog.toast({mes: '请填写详细地址', timeout: 1000,});
          this.$refs.address.focus();
        } else {
          this._map();
        }
      },
      //调用百度地图获取经纬度
      _map() {
        var map = new BMap.Map("allmap");
        var localSearch = new BMap.LocalSearch(map);
        var keyword = this.area;
        var _this = this;
        localSearch.setSearchCompleteCallback(function (searchResult) {
          var poi = searchResult.getPoi(0);
          if (poi == null) {
            _this.area = _this.province + _this.city + _this.region;
            if (_this.area != '') {
              _this._map();
            }
          } else {
            if (_this.item.contact_wechat == null) {
              _this.item.contact_wechat = ''
            }
            UpdateContact({
              "phpsid": localStorage.getItem('token'),   //session_id
              "contact_name": _this.item.contact_name,  //联系人
              "contact_phone": _this.item.contact_phone,  //联系电话
              "contact_wechat": _this.item.contact_wechat,  //微信
              "areaid_1": _this.province,  //一级地区
              "areaid_2": _this.city,  //二级地区
              "areaid_3": _this.region,  //三级地区
              "longitude": poi.point.lng,  //经度
              "latitude": poi.point.lat, //纬度
              "detailed_address": _this.item.detailed_address, //详细地址
              "contact_id": _this.item.id,  //地址id
            }).then(res => {
              if (Number(res.status) === 1) {
                if (_this.item.id != null) {
                  _this.$dialog.toast({mes: '修改成功', timeout: 1000,});
                } else {
                  _this.$dialog.toast({mes: '添加成功', timeout: 1000,});
                }
                _this.$emit('setting');
              } else if (Number(res.status) < 0) {
                _this.$dialog.toast({mes: res.expand.info, timeout: 1000,});
              }
            })
          }
        });
        localSearch.search(keyword);
      },
      //选中地址
      result1(res) {
        this.model = res.itemName1 + ' ' + res.itemName2 + ' ' + res.itemName3;
        this.province = res.itemName1; //省
        this.city = res.itemName2;//市
        this.region = res.itemName3;//区
      },
      //关闭
      close() {
        this.$emit('close');
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .address
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-d;
    display: flex;
    justify-content: center;
    align-items: center;
    .box
      background: $background-f;
      width: 90%;
      border-radius: .2rem;
      .title
        line-height: 1.35rem;
        text-align: center;
        font-size: .43rem;
        position: relative;
        color: $color-text;
        i
          position: absolute;
          top: 0;
          right: 0;
          width: 1rem;
          line-height: 1.35rem;
          text-align: center;
      .input-box
        display: flex;
        input
          width: 33.33%;
          padding-left: .4rem;
          height: 1.35rem;
          line-height: 1.35rem;
          color: $color-text;
          font-size: .35rem;
        input:
        :-webkit-input-placeholder
          color: $color-code;
    .area
      position: relative;
      padding: 0 .4rem;
      font-size: .35rem;
      input
        line-height: 1.35rem;
        width: 100%;
        color: $color-text;
      i
        position: absolute;
        top: 0;
        right: 0;
        width: 1rem;
        text-align: center;
        line-height: 1.35rem;
    .detailedAddress
      input:
      :-webkit-input-placeholder
        color: $color-code;
    .btn
      margin: .3rem;
      line-height: 1.2rem;
      text-align: center;
      border-radius: .1rem;
      background: $background-btn;
      font-size: .43rem;
      color: $color;


</style>
